<template>
  <div class="fr w950">
    <div class="comm_bd mb10 clearfix center_box">
      <div class="center_tt">
      我的道聚城白条
      <span class="line"><s class="l_7"></s></span>
    </div>
    <div class="issue-info clearfix">
      <div>
        <div class="fl issue-limit">
          <p>可用额度：<strong>0</strong> 元</p>
          <p>总额度：<strong>0</strong> 元</p>
          <p>我的信用分：<strong>0</strong></p>
        </div>
        <div class="fr issue-pay clearfix">
          <div class="fl issue-money">
                    <p>本期账单剩余应还款额：<strong>0</strong> 元</p>
                    <div class="total-money clearfix">
                      <span class="fl">总欠款额：<strong>0</strong>元</span>
                      <i class="fl i-issue i-ask" style="background-position: -6px -6px;"></i>
                    </div>
          </div>
          <div class="fr issue-btnbox">
            <div class="issue-reward"><a href="javascript:;" class="fr btn-pay repaydiv" title="立即还款">立即还款</a></div>
          </div>
        </div>
      </div>
    </div>
    </div>
    <div class="comm_bd mb10 clearfix center_box">
      <div class="center_tt">道聚城白条特权<span class="line"><s class="l_7"></s></span></div>
      <div class="issue-adimg">
          <img src="//js01.daoju.qq.com/common/images/channel/issue-ad.jpg" width="908" height="154" alt="先购物，后付款，付款更便捷">
    </div>
    </div>
     <div class="comm_bd mb10 clearfix center_box">
       <div class="center_tt">道聚城白条账单<span class="line"><s class="l_7"></s></span></div>
        <div class="comm_bd">
              <div id="tab_order" class="clearfix center_tab">
                <a class="current" >订单明细</a>
                <a class="">每月账单</a>
                <a class="">还款记录</a>
              </div>
            </div>
       <div>
         <div class="comm_bd issue-tbl" style="border-top-style: none;padding:0">
           <table width="100%">
                  <thead>
                    <tr class="bg-tr">
                      <th width="220">订单号</th>
                      <th width="165">游戏</th>
                      <th width="145">订单物品</th>
                      <th width="80">数量</th>
                      <th width="110">订单金额</th>
                      <th>消费时间</th>
                    </tr>
                  </thead>
                  <tbody id="dj2">
                    <tr>
                      <td colspan="6">暂无记录</td>
                    </tr>
                  </tbody>
          </table>
          <div class="page" id="page_wrapper">
                  <div id="list1_page"></div>
                  <div id="list2_page" style="display:none;"></div>
                  <div id="list3_page" style="display:none;"></div>
          </div>
         </div>
       </div>
    </div>
    <div class="comm_bd mb10 clearfix center_box">
      <div class="center_tt">道聚城白条规则<span class="line"><s class="l_7"></s></span></div>
      <div class="rule-info clearfix">
              <p class="rule-tip">针对连续多次未完成还款的用户，以下功能服务暂停使用，如您完成还款则立即重新恢复！</p>
              <ul class="rule-txt">
                <li>1、道聚城白条无法使用；</li>
                <li>2、不再享有道聚城CF会员服务（金卡85折、每月会员礼包、会员周边包邮、周边会员9折等）；</li>
              </ul>
          </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Rwu4'
}
</script>

<style lang="scss" scoped>
.fr {
    float: right;
}
.w950 {
   width: 950px;
   a{
     text-decoration: none;
   }
  .mb10 {
    .issue-btnbox {
    padding-left: 46px;
    width: 260px;
    border-left: 1px solid #e6e9ef;
      .issue-reward {
        font-size: 14px;
        color: #3a3f4a;
        line-height: 20px;
    }
   .btn-pay {
    margin: -61px 48px 0 0;
    display: block;
    width: 212px;
    height: 62px;
    line-height: 62px;
    text-align: center;
    background: #f74a4a;
    border-radius: 3px;
    font-size: 24px;
    color: #fff;
    text-decoration: none;
}
    }
    .rule-info {
    font-size: 14px;
    color: #3a3f4a;
    .rule-tip {
      line-height: 32px;
  }
  .rule-txt li {
    line-height: 26px;
}
}
    .page {
    text-align: center;
    padding-top: 10px;
    height: 38px;
}
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    .issue-tbl {
        .bg-tr {
      height: 36px;
      line-height: 36px;
      background: #f3f4f6;
      border-top: 1px solid #e6e9ef;
      border-bottom: 1px solid #e6e9ef;
   }
  th {
    font-weight: 400;
    font-size: 14px;
 }
 tbody tr {
    width: 90%;
    border-bottom: 1px dashed #e6e9ef;
    td {
    height: 40px;
    text-align: center;
}
}
    }
    .comm_bd {
    border: 1px solid #e6e9ef;
    background: #fff;
    .center_tab {
    border-bottom: 1px solid #e6e9ef;
    height: 44px;
  a {
    float: left;
    width: 130px;
    height: 44px;
    font-size: 14px;
    line-height: 44px;
    text-align: center;
    border-right: 1px solid #e6e9ef;
}
}
}
   margin-bottom: 10px;
   .issue-pay {
    width: 615px;
    height: 144px;
    background: #f3f4f6;
    .total-money {
    line-height: 35px;
    font-size: 14px;
    color: #3a3f4a;
    position: relative;
    .fl{
      float: left;
    }
    strong {
    font-size: 18px;
    font-weight: bold;
    }
    .i-ask {
    margin: 9px 0 0 6px;
    display: block;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  .i-issue {
    background: url(//js01.daoju.qq.com/common/images/mall/i-issue.png) no-repeat;
 }
    }
    }
    .fr {
        float: right;
    .issue-money {
    margin: 20px 0 0 25px;
    width: 282px;
    border-right: 1px solid #e6e9ef;
   p {
    line-height: 35px;
    font-size: 14px;
    color: #3a3f4a;
  strong {
    font-size: 16px;
    font-weight: bold;
}
}
}
    }
   .issue-info {
    margin-top: 18px;
    position: relative;
}
.issue-limit {
    width: auto;
    height: auto;
    float: left;
   p {
    line-height: 35px;
    font-size: 14px;
    color: #3a3f4a;
}
}
  }
  .center_box {
    padding: 15px 20px 20px 20px;
      .center_tt {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
     .line {
    display: block;
    background: #e6e9ef;
    height: 1px;
    overflow: hidden;
    margin-top: 5px;
       s.l_7 {
    width: 100px;
    }
    s {
    display: block;
    background: #f74a4a;
    height: 1px;
    overflow: hidden;
}
}
}
  }
  .comm_bd {
      border: 1px solid #e6e9ef;
      background: #fff;
  }
  }
</style>
